<template>
  <!-- -------------------------------------------布置作业------------------------------------ -->
  <div class="container-ass">
    <div class="top">
      <mytitle>作业要求</mytitle>
      <!-- 作业类型 -->
      <div class="worktType">
        <span>作业类型</span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 B"></el-checkbox>
          <el-checkbox label="复选框 C"></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 作业要求 -->
      <div class="workReq">
        <span>作业要求</span>
        <div class="selectGroup">
          <el-select v-model="timeVal" placeholder="选择时间范围">
            <el-option
              v-for="item in valueDate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="value1" placeholder="自定义显示列">
            <el-option
              v-for="item in all1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="value2" placeholder="自定义显示列">
            <el-option
              v-for="item in all2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="value3" placeholder="自定义显示列">
            <el-option
              v-for="item in all3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="bottom">
      <mytitle>基本信息</mytitle>
      <div class="msgSelect">
        <el-date-picker v-model="dateVal2" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-select v-model="value1" placeholder="自定义显示列">
          <el-option
            v-for="item in all1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <span>选择学生</span>
      <div class="selectStudent">
        <el-checkbox-group v-model="checkStu">
          <el-checkbox
            v-for="item in 20"
            :key="item.index"
            label="复选框 A"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div
      class="tijian_add button_add"
      style="position: fixed; left: 0; bottom: 0; width: 100%"
    >
      <div class="btnBox">
        <el-button @click="back">取消</el-button>
        <el-button @click="add">新增</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import mytitle from '../../components/title'
export default {
  components: {
    mytitle
  },
  data() {
    return {
      // 作业类型-复选框
      checkList: [],
      // 作业要求-时间-下拉框
      all1: [],
      all2: [],
      all3: [],
      timeVal: '',
      dateVal: '',
      dateVal2: '',
      value1: '',
      value2: '',
      value3: '',
      // 选择学生
      checkStu: [],
      // 时间范围
      valueDate: []
    }
  },
  methods: {
    // 添加
    add() {
      this.$confirm('是否在离开页面前保存修改？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '保存',
        cancelButtonText: '取消'
      }).then(() => {
        // if (this.$route.path === '/dealer') {

        // }
        this.$message({
          type: 'success',
          message: '保存修改'
        });
        this.$router.back()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消保存'
        })
      })
    },
    // 取消
    back() {
      this.$confirm('此操作将不保存该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.back()
      }).catch(() => {

      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container-ass {
  .top {
    background-color: #ffffff;
    width: 100%;
    height: 1.625rem;
    border-radius: 0.0781rem;
    padding: 0.1667rem 0.1406rem;
    .worktType {
      display: flex;
      flex-direction: middle;
      line-height: 0.3646rem;
      margin-left: 0.0885rem;
      & > span {
        margin-right: 0.3021rem;
        font-size: 0.0833rem;
        font-weight: 400;
        color: #888888;
      }
      .el-checkbox-group {
        .el-checkbox {
          width: 1.0417rem;
          height: 0.3646rem;
          background: #f0fffd;
          border-radius: 0.0521rem;
          border: 0.0052rem solid #c9ebe6;
          text-align: center;
          /deep/.el-checkbox__input {
            display: none;
          }
          /deep/.el-checkbox__label {
            font-size: 0.0833rem;
            font-weight: 500;
            color: #525252;
            line-height: 0.1146rem;
          }
        }
        /deep/.is-checked {
          background-color: #0fdd8d;
          /deep/.el-checkbox__label {
            color: #ffffff;
          }
        }
      }
    }
    .workReq {
      display: flex;
      flex-direction: middle;
      line-height: 0.3646rem;
      margin-left: 0.0885rem;
      & > span {
        margin-right: 0.3021rem;
        font-size: 0.0833rem;
        font-weight: 400;
        color: #888888;
      }
      .selectGroup {
        /deep/.el-input__prefix {
          display: none;
        }
        .el-select {
          margin-left: 0.1354rem;
          &:first-child {
            margin-left: 0;
          }
        }
        /deep/.el-select > .el-input--medium > .el-input__inner,
        /deep/.el-input .el-input__count .el-input__count-inner,
        /deep/.el-date-editor,
        /deep/.el-date-editor .el-input__inner {
          background-color: #f7fbfc;
          line-height: 0.2604rem;
          width: 1.0417rem;
          height: 0.2604rem;
          border-radius: 0.0521rem;
        }
      }
    }
  }
  .bottom {
    background-color: #ffffff;
    width: 100%;
    height: 4.2708rem;
    border-radius: 0.0781rem;
    margin-top: 0.1302rem;
    padding: 0.1667rem 0.1406rem;
    & > span {
      margin: 0.1406rem 0 0.1146rem 0.1042rem;
      font-size: 0.0833rem;
      font-weight: 400;
      color: #888888;
      display: inline-block;
    }
    .msgSelect {
      .el-select {
        margin-left: 0.1042rem;
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner,
      /deep/.el-date-editor,
      /deep/.el-date-editor .el-input__inner {
        background-color: #f7fbfc;
        line-height: 0.2604rem;
        width: 2.5rem;
        height: 0.2604rem;
        border-radius: 0.0521rem;
      }
    }
    .selectStudent {
      background-color: #f7fbfc;
      width: 100%;
      height: 3rem;
      border-radius: 0.0781rem;
      padding: 0.2188rem 0.4688rem;
      .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: inherit;
        .el-checkbox {
          width: 0.7708rem;
          height: 0.2604rem;
          background: #ffffff;
          border-radius: 0.0313rem;
          border: 0.0052rem solid rgba(15, 221, 141, 0.4);
          text-align: center;
          margin-top: 0.1406rem;
          /deep/.el-checkbox__input {
            display: none;
          }
          /deep/.el-checkbox__label {
            font-size: 0.0833rem;
            font-weight: 500;
            color: #525252;
            line-height: 0.2604rem;
          }
        }
        /deep/.is-checked {
          background-color: #0fdd8d;
          /deep/.el-checkbox__label {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>